<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />
    <!-- 内容 -->
    <!--// todo  -->
    <view class="main" v-if="list.length > 0">
      <scroll-view-y @refresh="refresh()" :pageNo="searchObject.pageNo" :pageSize="searchObject.pageSize" :total="total"
        @getMore="getMore()" :height="80">
        <view slot="scrollView_content">
          <view v-for="item, i in list" :key="i">
            <view :class="item.sign ? 'card state1' : 'card state0'" @click="toForm(item.reportId, item.sign)">
              <view class="title">{{ item.taskName }}</view>
              <view class="subTitle">机构名称：{{ item.agencyName }}</view>
              <view class="label">项目名称: {{ item.projectName }}</view>
            </view>
          </view>
        </view>
      </scroll-view-y>
    </view>
    <no-data v-else text="暂无报告"></no-data>
  </view>
</template>
<script>
import ScrollViewY from '@/components/scrollViewY/index.vue'
export default {
  components: { ScrollViewY },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide() {
    return {
      getData: this.getList
    }
  },
  data() {
    return {
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "报告列表"
        }
      },
      list: [],
      searchObject: {
        state: '8',
        pageNo: 1,
        pageSize: 10,

      },
      total: 0,
      dataStatus: '刷新', // 用于解决闪烁问题
      loading: false,
    }
  },
  onShow: function () {
    this.getList()
  },
  methods: {
    /*
    下拉选择事件，将选中的值 放到对应的searchObject中
    e：event
    type：哪个下拉框，对应searchObject 以及 下拉框的键值对
    */
    selector(e, type) {
      this.searchObject[type] = this.selectRange[type][e.detail.value].value
    },

    // 跳转表单
    toForm(id, sign) {
      uni.navigateTo({
        url: '../../pages_workTableChild/reportSign/index?reportId=' + id + "&sign=" + sign
      })
    },
    // 获取列表
    getList() {
      return new Promise((resolve, reject) => {
        if (this.loading) reject()

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });

        this.$store.dispatch('report_list', this.searchObject).then(res => {
          if (res && res.code === 200) {
            this.total = res.data.total;
            this.dataStatus === '刷新' ? this.list = res.data.items : this.list.push(...res.data.items)
            resolve(res.data);
          }
        }).finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
      })
    },
    // 刷新数据
    refresh() {
      this.dataStatus = "刷新";
      this.searchObject.pageNo = 1;
    },
    // 上拉加载
    getMore() {
      if (this.searchObject.pageNo * this.searchObject.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.searchObject.pageNo++;
      }
    },
  },
  computed: {
    // 内容页的 最小高度 100vh - 顶部自定义标题栏 - 顶部搜索 - 底部按钮
    contentHeight() {
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      // 顶部自定义导航栏高度
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight


      if (navigationBarHeight) {
        return 'height:calc(100vh - ' + (actionBarHeight + navigationBarHeight + 65) + 'px);'
      } else {
        return 'height:calc(100vh - 80rpx - 272rpx - 124rpx);'
      }
    },

    // 底部导航栏高度 单位px
    navigationBarHeight() {
      return (
        uni.getStorageSync("menuInfo").navigationBarHeight ||
        uni.getStorageSync("menuInfo").statusBarHeight / 2
      );
    },
    // 高度 =  100vh - 导航栏高度 - 状态栏高度 -  菜单高度
    listContainerHeight() {
      // 顶部状态栏 + 标题栏的高度 单位px
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight;
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      if (actionBarHeight) {
        return (
          "height:calc(100vh - " +
          (actionBarHeight + navigationBarHeight + 50) +
          "px);"
        );
      } else {
        return "height:calc(100vh - 128rpx);";
      }
    },
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.container_page {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #eff1f7;

  .main {
    // margin: 24rpx;
    width: 100%;
    min-height: calc(100vh - 80rpx);
    background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;


    .card {
      border-radius: 24rpx;
      background: white;
      padding: 24rpx;
      position: relative;
      margin: 0 auto 24rpx;
      width: calc(100% - 40rpx);

      &>view:not(:last-child) {
        margin-bottom: 20rpx;
      }

      .title {
        color: #333;
        font-weight: bold;
        font-size: 36rpx;
        margin-bottom: 24rpx;
      }

      .subTitle {
        font-size: 30rpx;
        color: #333;
      }

      .content {
        color: #345ac7;
        padding: 6rpx 12rpx;
        display: inline-block;
        background-color: rgba(51, 91, 199, 0.1);
        border-radius: 20rpx;
      }

      &:after {
        position: absolute;
        right: 0;
        top: 0;
        color: white;
        padding: 6rpx 12px;
        border-radius: 0 20rpx;
      }
    }

    // 搜索类型： 未反馈
    .card.state0 {
      &::after {
        content: "未反馈";
        background-color: #e81a1a;
      }
    }

    // 搜索类型： 已反馈
    .card.state1 {
      &::after {
        content: "已反馈";
        background-color: rgba(51, 91, 199, 0.7);
      }
    }
  }

  .footer {
    position: fixed;
    width: 100%;
    background: white;
    bottom: 0;
    padding: 24rpx;
    border-radius: 20rpx 20rpx 0 0;
    box-shadow: 0 -10rpx 10rpx 0 rgba(0, 0, 0, 0.2);

    .btn_add {
      background-color: #345ac7;
      border-radius: 20rpx;
      text-align: center;
      color: white;
      font-size: 36rpx;
      line-height: 80rpx;

      .cuIcon-add {
        display: inline-block;
      }
    }
  }
}
</style>